<template>
  <h1>隐藏指令相关练习</h1>
<!--  隐藏标签 隐藏属性-->
<!--  v-if="布尔值" true表示元素显示 false表示元素隐藏 -->
  <p v-if="user=='张三'">张三</p><br>
  <p v-if="user=='李四'">李四</p><br>
<!--  v-show-->
  <!-- v-if直接在HTML代码中删除元素
  v-show是修改元素的CSS属性display值为none,不会频繁删除创建元素,开销较小-->
  <p  v-show="false">太阳</p><br>
  <p  v-show="true">月亮</p><br>
  <hr>
  <p v-if="is">小红</p>
  <p v-if="is">小绿</p>
  <p v-else>小蓝</p>
</template>

<script setup>
import {ref} from "vue";

const user = ref("张三")
const is = ref(false)
</script>

<style scoped>

</style>